<!--
 * @description 京东活动
 * @author dumeng
 * @date 2021/7/28
 -->
<template>
  <div v-if="visible" class="jdhd-page">
    <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="京东活动" fullscreen center :before-close="handleCancel">
      <section class="select-inner">
        <section class="jdhd-page-main">
          <section class="main-search merge">
            <span class="svg-container">
              <svg-icon icon-class="search" />
            </span>
            <el-input v-model.trim="listQuery.activityName" placeholder="输入活动名称搜索" class="search-input" @keyup.enter.native="handleFilter" />
            <section class="search-btn">
              <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
            </section>
          </section>
          <section class="main-buttons">
            <section class="main-buttons-title">
              <span>京东活动</span>
            </section>
            <section class="main-buttons-btns">
              <el-button style="margin-left: 10px" @click="handleCreate">新建</el-button>
            </section>
          </section>

          <section class="main-table">
            <v-table :list="list" tag="jdactivitymain" :list-loading="listLoading" :filter-column="filtercolumn">
              <el-table-column label="操作" fixed="right" align="center" min-width="100" class-merchant-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="handleSelect(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </v-table>
            <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
          </section>
          <el-dialog v-el-drag-dialog custom-class="formClass" el-dialog :destroy-on-close="true" append-to-body :visible.sync="formVisible" :close-on-click-modal="false" title="新建京东活动" center width="750px">
            <el-form ref="form" :model="form" style="height: 500px" :rules="rules" label-width="100px">
              <el-form-item label="活动代码" prop="activityCode">
                <el-input v-model.trim="form.activityCode" :disabled="state!='create'" placeholder="请输入活动代码" />
              </el-form-item>
              <el-form-item label="活动名称" prop="activityName">
                <el-input v-model.trim="form.activityName" placeholder="请输入活动名称" />
              </el-form-item>
              <el-form-item label="起止时间" required>
                <el-col :span="8">
                  <el-form-item label prop="startDate">
                    <el-date-picker
                      v-model="form.startDate"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      placeholder="开始时间"
                      style="width: 100%;"
                    />
                  </el-form-item>
                </el-col>
                <el-col class="line" :ofset="2" :span="1" style="text-align:center;">-</el-col>
                <el-col :span="8">
                  <el-form-item label prop="endDate">
                    <el-date-picker
                      v-model="form.endDate"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :disabled="notimelimit"
                      type="datetime"
                      placeholder="结束时间"
                      style="width: 100%;"
                    />
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="6">
                  &nbsp; <el-checkbox v-model="notimelimit" @change="longTime">长期有效</el-checkbox>
                </el-col>
              </el-form-item>
              <el-form-item label="签名私钥" prop="rsaSignPrivateKey">
                <el-input v-model.trim="form.rsaSignPrivateKey" type="textarea" :rows="4" placeholder="请输入签名私钥" />
              </el-form-item>

              <el-form-item label="加密公钥" prop="rsaEncryptPublicKey">
                <el-input v-model.trim="form.rsaEncryptPublicKey" type="textarea" :rows="4" placeholder="请输入加密公钥" />
              </el-form-item>
              <el-form-item label="登录密钥" prop="loginAccessKey">
                <el-input v-model.trim="form.loginAccessKey" placeholder="请输入登录密钥" />
              </el-form-item>

              <el-form-item label="接口密钥" prop="interfaceAccessKey">
                <el-input v-model.trim="form.interfaceAccessKey" placeholder="请输入接口密钥" />
              </el-form-item>
              <el-form-item label="收银台地址" prop="collectMoneyAddress">
                <el-input v-model.trim="form.collectMoneyAddress" placeholder="请输入收银台地址" />
              </el-form-item>
              <el-form-item label="访问地址" prop="visitAddress">
                <el-input v-model.trim="form.visitAddress" placeholder="请输入访问地址" />
              </el-form-item>
              <el-form-item label="入金账户" prop="enterAccount">
                <el-select
                  v-model="form.enterAccount"
                  :disabled="state!='create'"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option v-for="(item, index) in accList" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="default" style="padding: 10px 30px" @click="visible = false">取 消</el-button>
              <el-button type="primary" @click="createSubmit()">确 定</el-button>
            </div>
          </el-dialog>
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { insert, queryPage, getInAcc } from './api'
import Pagination from '@/components/Pagination'
import VTable from '@/components/Table'
import elDragDialog from '@/directive/el-drag-dialog'
import CryptoJS from '@/utils/aesJiaJM'
export default {
  name: 'Shbmd',
  components: { VTable, Pagination },
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        activityName: ''
      },
      accList: [],
      list: [],
      total: 0,
      listLoading: false,
      formVisible: false,
      state: 'create',
      notimelimit: false,
      form: {
        id: '',
        activityCode: '',
        activityName: '',
        startDate: '',
        endDate: '',
        rsaSignPrivateKey: '',
        rsaEncryptPublicKey: '',
        loginAccessKey: '',
        interfaceAccessKey: '',
        collectMoneyAddress: '',
        visitAddress: '',
        status: '',
        enterAccount: ''
      },
      rules: {
        activityCode: [{ required: true, message: '请输入活动代码', trigger: 'blur' }],
        activityName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        startDate: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        endDate: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
        rsaSignPrivateKey: [{ required: true, message: '请输入签名私钥', trigger: 'blur' }],
        rsaEncryptPublicKey: [{ required: true, message: '请输入加密公钥', trigger: 'blur' }],
        loginAccessKey: [{ required: true, message: '请输入登录密钥', trigger: 'blur' }],
        interfaceAccessKey: [{ required: true, message: '请输入接口密钥', trigger: 'blur' }],
        collectMoneyAddress: [{ required: true, message: '请输入收银台地址', trigger: 'blur' }],
        enterAccount: [{ required: true, message: '请选择入金账户', trigger: 'change' }],
        visitAddress: [{ required: true, message: '请输入访问地址', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    longTime(val) {
      this.form.endDate = val ? '2099-12-31 23:59:59' : ''
      if (this.visible) {
        this.$refs.form.validateField('endDate')
      }
    },
    getAccFun() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getInAcc({ accountStatus: 'ZHZT01' }).then(res => {
          loading.close()
          const arr = res.data.data || []
          resolve(arr.map(a => ({
            ...a,
            value: a.id,
            label: `${a.name}(${CryptoJS.$aesJieM(a.accountNumber)})`
          })))
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleSelect(row) {
      this.$emit('select', row.id)
      this.handleCancel()
    },
    filtercolumn(scope, item) {
      return scope.row[item]
    },

    handleReset() {
      this.listQuery.page = 1
      this.listQuery.activityName = ''
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    async handleCreate() {
      for (const key in this.form) {
        if (key === 'status') {
          this.form[key] = 'ZT01'
        } else {
          this.form[key] = ''
        }
      }
      this.accList = await this.getAccFun()
      this.state = 'create'
      this.formVisible = true
    },
    /**
     * 新增提交
     */
    createSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = Object.assign({}, this.form)
          return new Promise((resolve, reject) => {
            insert(params).then(() => {
              this.dialogVisible = false
              loading.close()
              this.$message({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.formVisible = false
              this.getList()
            }).catch(error => {
              loading.close()
              reject(error)
            })
          })
        } else {
          return false
        }
      })
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        activityName: this.listQuery.activityName
      }
      return new Promise((resolve, reject) => {
        queryPage(query).then(response => {
          this.list = response.data.data.rows || []
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          reject(error)
          this.listLoading = false
        })
      })
    }
  }
}
</script>

<style lang="scss">
.jdhd-page {
  position: relative;
  .el-dialog__body {
    max-height: calc(100vh - 109px);
    min-height: calc(100vh - 109px);
    position: relative;
    .jdhd-page-main {
      //.formClass{
      //  background: red;
      //  .el-dialog el-dialog--center{
      //    background: red;
      //    .el-dialog__body{
      //      max-height: 75vh !important;
      //    }
      //  }
      //}
      padding: 10px;
      .main-search {
        background-color: #fff;
        padding: 0 10px;
        .svg-container {
          padding: 0 5px 0 10px;
          color: #bfced6;
          vertical-align: middle;
          display: inline-block;
        }
        .search-input {
          width: 60%;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            left: -25px;
            right: 0;
            bottom: 8px;
            height: 1px;
            background: rgba(226, 227, 232, 1);
          }
          input {
            outline: none;
            background: transparent;
            border: none;
            outline: medium;
            padding: 0;
            &:focus {
              outline: none;
              background-color: transparent;
            }
          }
        }
        .search-btn {
          display: inline-block;
          float: right;
          .el-button.is-round {
            padding: 10px 30px;
            margin-right: 34px;
          }
          .search-more {
            font-size: 14px;
            font-weight: 500;
            @include font-color($mainColor);
            cursor: pointer;
            margin-left: 10px;
          }
        }

        &.merge {
          height: 50px;
          line-height: 50px;
        }
      }

      .main-buttons {
        display: flex;
        line-height: 36px;
        margin-bottom: 10px;
        .main-buttons-title {
          flex: 1;
          height: 36px;
          line-height: 36px;
          font-size: 16px;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
          .num {
            @include font-color($mainColor);
          }
        }
      }
    }
  }
}
</style>
